<template>
<el-drawer v-if="drawer" :visible.sync="drawer" :with-header="false">
      <div style="width: 100%;height:100%;background-color: #fff;">
        <div style="width: 100%;height: 250px; position: relative;z-index: 1;">
          <img :src="user[0].signatureIMG" alt=""
            width="100%" height="250">
        </div>
        <div
          style="width: 95.4%;height: 500px;padding: 15px 10px 0 10px;position: relative; z-index: 2; border-radius: 3% 0 0 3%;margin-top: -15px;background-color: #fff;">
          <div style="width: 100%;height: 200px;display: flex;">
            <div style="width:175px;height: auto;">
              <img :src="user[0].uphoto" alt="" width="170px" height="170px" style="border-radius: 5px">
            </div>
            <div style="width: 100%;height: 200px;margin-top: -3px;margin-left:7px;text-align: left;">
              <div style="width: 100%;height: 35px; font-family:楷体; font-size: 30px;">
                {{ user[0].uname }}
              </div>
              <div v-if="drawer"
                style="width: 250px;height: auto;padding: 0 0 0 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <el-tag v-for="(item, index) in user[0].uhobby.split(',')"
                  :type="Math.floor(Math.random() * 100) % 2 == 0 ? 'success' : Math.floor(Math.random() * 100) % 3 == 0 ? '' : Math.floor(Math.random() * 100) % 4 == 0 ? 'warning' : 'danger'"
                  effect="plain" :key="index" color="#ffffff" style="margin: 5px 5px 5px 0px;">
                  {{ item }}
                </el-tag>
              </div>
              <el-tag effect="dark" type="danger" style="margin: 0 5px 5px 3px; padding: 0 5px 0 5px;">
                年龄:{{ user[0].uage }}岁</el-tag>
              <p style="margin-bottom: 3px;"><i class="el-icon-location-information"></i> {{ user[0].uaddress }}</p>
              <svg t="1711941948097" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10928" width="30" height="30">
                <path
                  d="M725.800421 387.395368c65.482105 0 122.287158 45.056 135.168 107.034948l59.392 227.435789a36.648421 36.648421 0 0 1-7.006316 32.336842 39.073684 39.073684 0 0 1-30.181052 14.767158l-52.116211 0.269474a5059.098947 5059.098947 0 0 0-28.56421 85.423158 37.834105 37.834105 0 0 1-36.163369 25.869474h-80.949895a38.049684 38.049684 0 0 1-36.486736-26.031158c-9.970526-30.935579-21.018947-62.841263-28.456421-84.453053-22.959158-0.161684-52.062316-0.700632-52.062316-0.700632a39.397053 39.397053 0 0 1-30.288842-14.982736 37.295158 37.295158 0 0 1-6.844632-32.444632l59.823158-229.591579c12.395789-59.823158 69.254737-104.933053 134.736842-104.933053zM241.987368 358.561684c130.748632-40.582737 263.006316 56.697263 263.006316 181.625263v135.383579c0 15.090526-12.665263 27.486316-28.240842 27.486316h-52.547368v167.073684a10.401684 10.401684 0 0 1-10.563369 10.24H192.404211a10.401684 10.401684 0 0 1-10.509474-10.24v-167.073684H113.717895a12.449684 12.449684 0 0 1-12.665263-12.341895v-138.24c0-87.309474 55.727158-167.558737 140.880842-193.913263z m491.250527-200.272842c64.673684 0 117.382737 51.415579 117.382737 114.580211s-52.655158 114.526316-117.382737 114.526315-117.382737-51.361684-117.382737-114.526315c0-63.164632 52.655158-114.580211 117.382737-114.580211z m-430.618948-38.265263c64.781474 0 117.436632 51.415579 117.436632 114.58021 0 63.272421-52.655158 114.580211-117.382737 114.580211s-117.382737-51.415579-117.382737-114.580211 52.655158-114.526316 117.382737-114.526315z"
                  fill="#00ADEE" p-id="10929"></path>
              </svg>
              <p style="margin-top: -30px;margin-left: 40px;">{{ user[0].usex }}</p>
            </div>
          </div>
          <div style="width: 100%;height: 400px;border: 1px saddlebrown solid;position: relative;">
            个性签名 <br>
            <el-input style="font-size: 16px;" type="textarea" placeholder="请输入内容" v-model="user[0].signature" :readonly="true"
              :autosize="{ minRows: 4, maxRows: 4 }">
            </el-input>
            <hr>
            <br>
            <div style="width: 100%;text-align: center;">
              <el-progress type="circle" :percentage="percentage2" :format="format2"></el-progress>
              <p style="font-size: 18px;color: red;"
              v-if="percentage2<=20 ? percentext = '你们好像不太适合呢' : percentage2<=50 && percentage2>20 ? percentext='你们或许可以是朋友呢':  percentage2<=80 && percentage2>50 ? percentext='你们或许可以是非常好的好朋友呢': percentage2<=100 && percentage2>80 ? percentext='你们真是天生的一对呢': percentext='数据有误'">
                {{ percentext }}
              </p>
            </div>
            <div style="width: 100%;position: absolute;bottom: 0;">
              <el-button plain type="danger" style="width: 48.8%;font-size: 17px;" @click="updateFStatus(2)">拒绝添加</el-button>
              <el-button type="primary" style="width: 48.8%;font-size: 17px;" @click="updateFStatus(1)">好友通过</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
</template>

<script>
import EventBus from '../util/EventBus'
import axios from 'axios'
export default {
  data () {
    return {
      drawer: false,
      myUser: [JSON.parse(sessionStorage.getItem('user'))], // 个人信息List
      user: [],
      firendData: []
    }
  },
  methods: {
    format2 (percentage2) {
      const tex = '匹配度'
      return tex + '\n' + percentage2 + '%'
    },
    updateFStatus (status) {
      axios.defaults.withCredentials = true
      axios({
        url: 'http://152.136.143.223:9091/user/' + status + '/' + this.firendData.fid,
        method: 'put'
      }).then((res) => {
        if (res.data.data > 0) {
          if (status === 1) {
            this.$notify({
              title: '成功',
              message: '恭喜你们！好友关系建立成功',
              type: 'success'
            })
          } else {
            this.$notify({
              title: '取消',
              message: '已成功拒绝对方好友申请',
              type: 'info'
            })
          }
          EventBus.$emit('friendApply', true)
        }
      })
    }
  },
  mounted () {
    EventBus.$on('getFriendDetails', (userData, firendData) => {
      this.user = userData
      this.firendData = firendData
      this.drawer = true
    })
  },
  watch: {
    drawer () {
      let count = 0
      this.percentage = 0
      this.user[0].uhobby.split(',').forEach(res => {
        this.myUser[0].uhobby.split(',').forEach(MyRes => {
          if (MyRes === res) {
            count += 0.9
          }
        })
      })
      const difference = this.user[0].uhobby.split(',').length - count
      if (difference <= 1) {
        this.percentage2 = 100
      } else if (difference <= 2) {
        this.percentage2 = 80
      } else if (difference <= 5) {
        this.percentage2 = 50
      } else if (difference > 5) {
        this.percentage2 = 20
      }
    }
  }
}
</script>

<style>

</style>
